<template>
  <wrap title="银行卡信息">
    <div slot="page">
      <div class="fill-box light-bg">
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15 label">持卡人</span>
          <span class="font-15 fill-data content" v-if="bank.name">{{bank.name}}</span> 
          <!-- <input class="font-15" type="text" v-model="bank.name" placeholder="请填写持卡人" > -->
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15 label">银行卡号</span>
          <input class="font-15 content" v-model="bank.bankNo" type="text" placeholder="请填写银行卡号">
          <input class="hide" type="file" ref="file" @change="upload" accept="image/*">
          <i class="fa fa-lg fa-camera inline-i" @click="trigger()"></i> 
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15 label">卡类型</span>
          <span class="font-15 fill-data" :class="bank.bankName?'content':'placeholder'" @click="showPicker=!showPicker" >
            {{bank.bankName?bank.bankName:'请选择'}}
            
          </span> 
          <i class="fill-item-info" @click="showTips"></i> 
        </div>
        <div class="fill-item border-bottom flex flex-justify-between flex-align-center">
          <span class="font-15 label">预留手机号</span>
          <input class="font-15 content" type="text" v-model="bank.phone" placeholder="请填写预留手机号" >
        </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">下一步</a>
      <cube-picker :data="bankList" :show="showPicker" @cancel="cancel = false" @select="select"></cube-picker>
      <keyboard :loading="loading" :time="time" :phone="bank.phone" :verifyBtn='verifyBtn' @submit="saveBankInfo" @send="sendVerify" @close="showVerify = false" v-if="showVerify"></keyboard>
    </div>
  </wrap>
</template>
<script>
   const Validate = {
     mobile: function (num) { // 验证手机
       return /^1[3|4|5|7|8][0-9]\d{8}$/.test(num)
     },
     email: function (email) { // 验证邮箱
      /* eslint-disable*/
      return /^([a-zA-Z0-9]+[_|\_|-|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(email)
    },
    number: function (num) { // 验证数字
      return /^[0-9]*$/.test(num)
    }
  }
  import wrap from '../../components/wrap.vue'
  import cubePicker from '../../components/cubePicker.vue'
  import keyboard from '../../components/keyboard.vue'
  import '../../assets/plugin/lrz.js'
  export default {
    components: {wrap, cubePicker, keyboard},
    data () {
      return {
        nextEnable: false,
        showPicker: false,
        loading: false,
        bankList: [],
        verifyBtn: {
          text: '获取验证码',
          enable: true,
          desc: ''
        },
        time: 60,
        // timer: Function,
        showVerify: false,
        verify: '',
        bank: {
          name: '',
          phone: '',
          bankId: 0,
          bankNo: '',
          bankName: '',
          banks: []
        }
      }
    },
    created () {
      const self = this
      self.$api.fill.getBankInfo().then(res => {
        if (res.code === 0) {
          self.bank = res.data
          let option = []
          self.bank.banks.forEach(item => {
            option.push({value: item.value, label: item.text})
          })
          self.bankList = option
        } else {
          self.$Toast(res.userMsg)
        }
      })
      self.$watch('bank', () => {
        if (self.bank.bankNo && self.bank.bankId && self.bank.name && self.bank.phone) {
          self.nextEnable = true
        } else {
          self.nextEnable = false
        }
      }, {deep: true})
    },
    methods: {
      trigger () {
        const self = this
        self.$refs.file.click()
      },
      upload (e) {
        const self = this
        const file = e.target.files[0]
        if (file.length === 0) return
        self.$Indicator.open()
        /* eslint-disable*/
        lrz(file, { width: 1000 }).then(img => {
          let form = new FormData()
          form.append('images', img.file)
          form.append('length', img.fileLen)
          self.$api.fill.cardRecognize(form).then(res => {
            self.$Indicator.close()
            if (res.code === 0) {
              self.bank.bankNo = res.data.replace(/\s/g,'')
            } else {
              // self.$Toast(res.userMsg)
              self.$MessageBox.alert(res.userMsg);
            }
          })
        })
      },
      select (data) {
        const self = this
        self.bank.bankName = data.label[0]
        self.bank.bankId = data.value[0]
        this.showPicker = false
      },
      cancel () {
        this.showPicker = false
      },
      sendVerify () {
        const self = this
        if (!self.verifyBtn.enable) {
          return
        }
        if (!Validate.mobile(self.bank.phone)) {
          self.$Toast('请填写正确的手机号码')
          return
        }
        self.$Indicator.open()
        self.$api.fill.validateBankInfo(self.bank.bankId, self.bank.bankName, self.bank.bankNo, self.bank.phone).then( res => {
          self.$Indicator.close()
          if(res.code === 0){
            self.showVerify = true
            self.verifyBtn.desc = '验证码发送成功'
          }else{
            self.$MessageBox.alert(res.userMsg);
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },
      next () {
        let self = this
        if (!self.nextEnable) {
          return
        }
        if (!Validate.mobile(self.bank.phone)) {
          self.$Toast('请填写正确的手机号码')
          return
        }
        self.$Indicator.open()
        self.$api.fill.validateBankInfo(self.bank.bankId, self.bank.bankName, self.bank.bankNo, self.bank.phone).then( res => {
          self.$Indicator.close()
          if(res.code === 0){
            self.verifyBtn.desc = '验证码发送成功'
            self.showVerify = true
          }else{
            self.$MessageBox.alert(res.userMsg);
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },
      saveBankInfo(data) {
        let self = this
        self.verify = data
        if (!self.verify) {
          self.$Toast('请填写验证码')
          return
        }
        if(self.loading){ return }
        self.loading = true
        self.$api.fill.saveBankInfo(self.verify, self.bank.bankId, self.bank.bankName, self.bank.bankNo, self.bank.phone).then( res => {
          self.loading = false
          if(res.code === 0){
            self.showVerify = false
            self.$router.push('/fill/authorization/')
          } else {
            self.verifyBtn.text = '重新发送'
            self.verifyBtn.enable = true
            self.verifyBtn.desc = res.msg+'，请重新获取'
          }
        }).always(function () {
          self.$Indicator.close()
        })
      },
      showTips () {
        const self = this
        self.$MessageBox({
          title: '',
          message: '目前支持工商银行、中国银行、农业银行、建设银行、中信银行、兴业银行、浦发银行、平安银行、广发银行、北京银行的银行卡绑定',
          confirmButtonText: '知道了',
          confirmButtonHighlight: true
        });
      }
    }
  }
</script>
<style>
  .mint-popup.mint-popup-bottom{width:100%}
  .icon-gantanhao{font-size: 16px;color: #999;text-align: right}
  .mark{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}
  .verify{position:fixed;width:300px;height:170px;top:50px;left:50%;margin-left:-150px;border-radius:10px;}
  .verify h4{height:50px;line-height:50px;}
  .verify-input{padding:20px}
  .verify-input input{width:150px;border:solid 1px #ccc;}
  .verify-btn-box a{display:block;width:50%;height:50px;line-height:50px;text-align:center;font-size:16px;}
  .fill-item input,.fill-data{margin-left: 0px!important}
</style>